<template>
  <div>
    <!-- 顶部筛选条件-->
    <el-form :model="filterData" size="mini">
      <el-row :gutter="20">
        <el-col style="width:240px">
          <el-form-item >
            <el-input v-model="filterData.title" placeholder="请输入企业名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:240px">
          <el-form-item >
            <el-input v-model="filterData.taxcode" placeholder="请输入纳税号码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:240px">
          <el-form-item >
            <el-input v-model="filterData.bankid" placeholder="请输入银行账号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="loadDataList">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="height: 2px; border-bottom: 1px solid #E9E9E9;"></div>

    <!--添加供应商-->
    <PopupNew ref="popupnew" v-if="addDialogVisible" @closeHandler="handleeditcomplete"></PopupNew>
    <PopupEdit ref="popupedit" v-if="editDialogVisible" @closeHandler="handleeditcomplete"></PopupEdit>


    <!--数据表格-->
    <div style="padding: 5px 0px;">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="PopupAddDialog">新增档案</el-button>
    </div>
    <el-table :data="tableData" border style="min-height: calc(100vh - 200px)">
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="title" label="单位名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="region_values" label="区域" width="100px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="taxcode" label="纳税号码" width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" label="详细地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="mobile" label="联系电话"></el-table-column>
      <el-table-column prop="bankname" label="开户行" show-overflow-tooltip></el-table-column>
      <el-table-column prop="bankid" label="银行账号"></el-table-column>
      <el-table-column prop="status" label="审核状态" width="100" v-if="false">
        <template v-slot="scope">
          <span v-if="scope.row.status==0">待审核</span>
          <span v-if="scope.row.status==1" style="color: #5DAF34;">已审核</span>
        </template>
      </el-table-column>


      <el-table-column prop="createtime" label="添加时间" width="140px"></el-table-column>
      <el-table-column prop="account" label="所属账套" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button-group>
            <el-button circle @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit-outline" size="mini" title="编辑客户单位抬头">
            </el-button>
            <el-button circle type="danger" @click="handleDelete(scope.$index, scope.row)" title="删除" size="mini"  icon="el-icon-delete"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px; text-align: right;">
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager, next,sizes,total" :page-sizes="[15, 25, 35]" :total="total" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>

  </div>
</template>

<script>
  import PopupNew from './New.vue';
  import PopupEdit from './Edit.vue';
  export default {
    components: {
      PopupNew,
      PopupEdit
    },
    data() {
      return {
        //分页相关
        curpage: 1,
        pagesize: 15,
        total: 1,
        filterData: {
          title: '',
          taxcode:'',
          bankid:''
        },
        tableData: [],
        currentEditIndex: -1,
        addDialogVisible: false,
        editDialogVisible: false,
        dispathBmVisible: false,
        userMgrVisible: false
      }
    },
    mounted() {
      this.loadDataList();
    },
    methods: {
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList: function() {
        let params = {
          title: this.filterData.title,
          taxcode:this.filterData.taxcode,
          bankid:this.filterData.bankid,
          curpage: this.curpage,
          pagesize: this.pagesize
        };
        this.axios.post("/api/admin/client/list", params).then((res) => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.total = parseInt(res.data.total);
            this.curpage = parseInt(res.data.curpage);
            this.pagesize = parseInt(res.data.pagesize);
          }
        });
      },
      handleEdit(index, row) {
        this.currentEditIndex = index;
        this.editDialogVisible = true;
        this.$nextTick(() => {
          this.$refs["popupedit"].initData(JSON.parse(JSON.stringify(row)));
          this.$refs["popupedit"].dialogVisible = true;
        })

      },
      handleeditcomplete: function(data) {
        this.loadDataList();
      },
      handleDelete(index, row) {
        this.$confirm("确定要删除此单位档案吗？ ", "确认", {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: 'error'
        }).then(() => {
          this.axios.post("/api/admin/client/remove", {
            id: row.id,
          }).then((res)=>{
              if(res.status==200 && res.data.code==0){
                this.$message.success("删除成功");
                this.loadDataList();
              }
          }).catch((e)=>{

          })
        })
      },
      PopupAddDialog: function() {
        this.addDialogVisible = true;
        this.$nextTick(() => {
          this.$refs["popupnew"].dialogVisible = true;
          this.$refs["popupnew"].initData();
        })

      }
    }
  }
</script>

<style>
</style>
